<template>
    <view class="container">
        <view class="card-box">
            <block
                v-if="paymentList.length > 0"
            >
                <u-swipe-action-item
                   :options="[{
                     text: '删除',
                     style: {
                        backgroundColor: '#f56c6c',
                        fontSize: '28rpx'
                     }
                   }]"
                   v-for="(item, k) in paymentList"
                   :key="item.id"
                   @click="delPayment(item.id, k)"
                >
                    <view class="card-li" @click="navigateTo(item)">
                        <view class="li-top">
                            <view class="li-top-payment">
                                <u-icon
                                    :name="item.platform? item.platform.icon:null"
                                    width="46rpx"
                                    height="46rpx"
                                ></u-icon>
                                <u-text
                                    :text="item.platform? item.platform.name:null"
                                    size="26rpx"
                                    color="#000000"
                                    margin="0 0 0 10rpx"
                                ></u-text>
                            </view>
                            <view class="li-top-state">
                                <u-icon
                                    name="https://img.ionepin.com/9b95347c870d38d883da59234ca788f7cda4bb44.png"
                                    height="38rpx"
                                    width="38rpx"
                                ></u-icon>
                                <u-text
                                    :text="item.state == 'normal'? '已开通':'账号异常'"
                                    size="26rpx"
                                    color="#356CE7"
                                    margin="0 0 0 10rpx"
                                ></u-text>
                            </view>
                        </view>
                        <u-text
                            :text="item.payee"
                            color="#888888"
                            size="30rpx"
                            margin="24rpx 0 0 0"
                        ></u-text>
                        <u-text
                            :text="item.account"
                            color="#000000"
                            size="30rpx"
                            margin="14rpx 0 0 0"
                        ></u-text>
                    </view>
                </u-swipe-action-item>
            </block>
            <u-empty
                mode="data"
                textSize="28rpx"
                width="400rpx"
                height="400rpx"
                icon="https://img.ionepin.com/dcfe6ae6d90104cbc50c50dd6010c1f8eabee5a3.png"
                class="empty"
                v-else
            >
            </u-empty>
            <u-loadmore
                height="50rpx"
                :status="loadStatus"
                v-if="total > 6"
                marginTop="40rpx"
                marginBottom="20rpx"
                fontSize="32rpx"
                iconSize="34rpx"
                line
            />
        </view>
        <view class="h-100" v-if="type != 'select'"></view>
        <view class="bottom" v-if="type != 'select'">
            <u-button
               text="添加收款方式"
               :customStyle="{
                    height: '90rpx',
                    background: '#000000',
                    fontSize: '30rpx',
                    color: '#FFFFFF'
               }"
               @click="$u.route('pages_v2/paymentSave/index')"
            ></u-button>
        </view>
    </view>
</template>

<script>
    import { getPaymentPages, delPayment } from "@/config/api"
    export default {
        name: "index",
        data() {
            return {
                listQuery: {
                    page: 1,
                    list_rows: 10
                },
                total: 0,
                paymentList: [],
                type: null
            }
        },
        computed: {
            loadStatus() {
                if (this.total > this.paymentList.length) {
                    return "loading"
                } else {
                    return "nomore"
                }
            }
        },
        onLoad(option) {
            this.type = option.type
        },
        onShow() {
            this.listQuery.page = 1
            this.getData()
        },
        onReachBottom() {
            if (this.total > this.paymentList.length) {
                this.listQuery.page += 1
                this.getData(true)
            }
        },
        methods: {
            async getData(more=false) {
                const res = await getPaymentPages(this.listQuery)
                if (more) {
                    this.paymentList = [...this.paymentList, ...res.items]
                } else {
                    this.paymentList = res.items
                }
                this.total = res.total
            },
            async delPayment(id, index) {
                const res = await delPayment(id)
                uni.$u.toast('删除成功')
                this.getData()
            },
            navigateTo(item) {
                if (this.type == 'select') {
                    this.$store.dispatch("user/setPayment", item)
                    uni.$u.route({
                        type: 'navigateBack'
                    })
                } else {
                    uni.$u.route("pages_v2/paymentSave/index", {id: item.id})
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        padding-bottom: 1px;
        .card-box {
            //padding: 0 40rpx;
            .card-li {
                padding: 32rpx 40rpx;
                border-bottom: 1px solid #EEEEEE;
                .li-top {
                    display: flex;
                    justify-content: space-between;
                    .li-top-payment {
                        display: flex;
                    }
                    .li-top-state {
                        display: flex;
                    }
                }
            }
        }
        .h-100 {
            height: calc(var(--window-bottom) + 143rpx);
        }
        .bottom {
            background: #ffffff;
            position: fixed;
            z-index: 999;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 20rpx 20rpx calc(var(--window-bottom) + 33rpx) 20rpx;
        }
        .empty {
            padding: 100rpx 0;
        }
    }
</style>
